<template>
    <view class="bottom">
        <Header></Header>
        <view>
            <view class="back">
                <u-icon style="border: 1px #00eaff solid;border-radius: 50%;margin-left: 50rpx;margin-right: 20rpx"
                        name="arrow-left" color="#00eaff" @click="back"></u-icon>
                <text style="color: #00eaff;padding-right: 30rpx">Sharing Rebates</text>
            </view>
        </view>
        <view>
            <view style="font-size: 36rpx;text-align: center;padding: 40rpx;color: #e4c65c">Promotion ratio</view>
            <view class="title">
                <view class="title-name">
                    <u-row gutter="16">
                        <u-col span="3" text-align="center">
                            <view>Number of Promoters</view>
                        </u-col>
                        <u-col span="3" text-align="center">
                            <view>Invited users recharge</view>
                        </u-col>
                        <u-col span="3" text-align="center">
                            <view>Commission sharing ratio</view>
                        </u-col>
                        <u-col span="3" text-align="center">
                            <view>income</view>
                        </u-col>
                    </u-row>
                </view>
                <view class="title-number">
                    <u-row gutter="16">
                        <u-col span="3" text-align="center">
                            <view>{{ shareRebateList.share_num }}</view>
                        </u-col>
                        <u-col span="3" text-align="center">
                            <view>{{ shareRebateList.share_user_recharge }}</view>
                        </u-col>
                        <u-col span="3" text-align="center">
                            <view>{{ shareRebateList.retail_rate }}</view>
                        </u-col>
                        <u-col span="3" text-align="center">
                            <view>{{ shareRebateList.retail_sum }}</view>
                        </u-col>
                    </u-row>
                </view>
            </view>
            <view style="font-size: 32rpx;text-align: center;padding-top: 20rpx;color: #e4c65c">My promotion</view>
            <view class="user" v-if="share_list.length > 0">
                <view style="padding-top: 20rpx">
                    <u-row gutter="16">
                        <u-col span="3" text-align="center">
                            <view>avatar</view>
                        </u-col>
                        <u-col span="4" text-align="center">
                            <view>nickname</view>
                        </u-col>
                        <!--                        <u-col span="3" text-align="center">-->
                        <!--                            <view>充值钻石总数</view>-->
                        <!--                        </u-col>-->
                        <u-col span="5" text-align="center">
                            <view>Obtained diamonds</view>
                        </u-col>
                    </u-row>
                </view>
                <view v-for="(item, index) in share_list" :key="index" class="user-list">
                    <view class="user-list-item">
                        <u-row gutter="16">
                            <u-col span="3" text-align="center">
                                <u-avatar :src="item.avatar" size="60" mode="circle"></u-avatar>
                            </u-col>
                            <u-col span="4" text-align="center">
                                <view>{{ item.nickname }}</view>
                            </u-col>
                            <!--                            <u-col span="3" text-align="center">-->
                            <!--                                <view>{{ item.coin_amount }}</view>-->
                            <!--                            </u-col>-->
                            <u-col span="5" text-align="center">
                                <view>{{ item.coin }}</view>
                            </u-col>
                        </u-row>
                    </view>
                </view>
            </view>
            <view v-else>
                <u-divider style="padding: 30rpx" bg-color="#0f0e2d">There's no more data left</u-divider>
            </view>
        </view>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>
import CustomTabbar from "@/components/tabbar/tabbar.vue";
import Header from "@/components/header/header.vue";

export default {
    name: "shareRebate",
    components: {
        Header,
        CustomTabbar,
    },
    data() {
        return {
            // 分享返佣列表
            shareRebateList: {},
            share_list:[]
        };
    },
    onShow() {
        this.getRetailList();
    },
    methods: {
        // 返回
        back() {
            this.$u.route({
                type: 'navigateBack',
                delta: 1
            })
        },
        // 获取分享返佣
        getRetailList() {
            this.$u.api.getRetailList().then(res => {
                this.shareRebateList = res.data;
                this.share_list = res.data.share_list;
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.back {
    line-height: 100rpx;
    //margin-left: 30rpx;
    color: white;
    font-size: 34rpx;
    background-image: url("@/static/images/header-bg.png");
    background-size: cover;
    height: 100rpx;
}

.title {
    border-radius: 30rpx;
    overflow: hidden;

    .title-name {
        background-image:linear-gradient(135deg,#FD6585 10%,#0D25B9 100%);
        color: #c6c4d8;
        height: 100rpx;
        line-height: 50rpx;
    }

    .title-number {
        background-image:linear-gradient(115deg,#EEAD92 15%,#6018DC 100%);
        height: 100rpx;
        line-height: 100rpx;
    }
}

.user {
    padding-top: 30rpx;

    .user-list {
        padding-top: 20rpx;

        .user-list-item {
            padding-top: 10rpx;
        }
    }
}
</style>
